<template>
  <div class="container">
    <div id="love-space" class="love-space">
      <div id="love" class="love"></div>
      <div id="love-from" class="love-from"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
let index = 0;
const arr: Array<any> = [
  {
    content: '你是非常可爱的人，真应该遇到最好的人，我也真希望我就是。',
    author: '-王小波',
  },
  {
    content: '巧笑倩兮，美目盼兮，素以为绚兮。',
    author: '-论语·八佾篇',
  },
  {
    content: '昨夜西风凋碧树，独上高楼，望尽天涯路。',
    author: '-晏殊',
  },
  {
    content: '井底点灯深烛伊，共郎长行莫围棋。',
    author: '-温庭筠',
  },
  {
    content: '竹外桃花三两枝，春江水暖鸭先知。',
    author: '-苏轼',
  },
];
onMounted(() => {
  // let love_space = document.getElementById('love-space') as HTMLElement;
  let love = document.getElementById('love') as HTMLElement;
  let love_from = document.getElementById('love-from') as HTMLElement;
  love.innerHTML = arr[index].content;
  love_from.innerHTML = arr[index].author;
  // love_space.style.animation = 'hidetip 5s linear ';
  setInterval(() => {
    if (index >= arr.length - 1) {
      index = 0;
    } else {
      index++;
    }
    love.innerHTML = arr[index].content;
    love_from.innerHTML = arr[index].author;
    // love_space.style.animation = 'hidetip 5s linear';
  }, 5000);
});
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(
    145deg,
    #ee9ca7,
    #ffdde1,
    #fbd786,
    #f7797d,
    #c471ed,
    #2980b9,
    #8e44ad,
    #f7797d
  );
  background-size: 400%;
  font-family: '楷体', '楷体_GB2312';
  animation: zi 30s both linear infinite;
  .love-space {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: hidetip 5s linear infinite;
  }
  .love {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 0.2rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }
  .love-from {
    padding: 0 20px;
    color: #fff;
    font-size: 1.5rem;
  }
}
@keyframes hidetip {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes zi {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
</style>

